<template>
  <el-card class="box-card">
    <el-container id="LoginForm">
      <el-header>
        <h2 style="text-align: center;">登录</h2>
      </el-header>
      <!-- 登录表单填写 -->
      <el-main style="padding: 0px 50px 0px 50px;">
        <el-tabs id="loginTabs" v-model="loginType">
          <el-tab-pane label="手机" name="phone"></el-tab-pane>
          <el-tab-pane label="邮箱" name="email"></el-tab-pane>
        </el-tabs>
        <br/>
        <el-form :model="loginForm" status-icon :rules="loginRules" ref="loginForm" label-position="left" label-width="70px"
          class="loginForm">
          <el-form-item prop="loginId">
            <template slot="label">
              用户名
            </template>
            <el-input v-model="loginForm.loginId" suffix-icon="iconfont el-icon-icon_zhanghao"></el-input>
          </el-form-item>
          <!-- <el-form-item prop="loginType">
            <el-switch style="display: block" v-model="loginForm.loginType" active-color="#13ce66" inactive-color="#4092ff"
              active-text="手机" inactive-text="邮箱">
            </el-switch> -->
          </el-form-item>
          <el-form-item prop="password">
            <template slot="label">
              密码
            </template>
            <el-input type="password" v-model="loginForm.password" auto-complete="off" suffix-icon="iconfont el-icon-hezuohuobanmiyueguanli"></el-input>
          </el-form-item>
          <el-form-item label-width="0px">
            <center>
              <el-button type="primary" @click="btnSubmitForm('loginForm')">提交</el-button>
              <el-button @click="resetForm('loginForm')">重置</el-button>
            </center>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </el-card>
</template>

<script>
  export default {
    data() {
      var checkLoginId = (rule, value, callback) => {
        if (!value) {
          return callback(new Error("请填写手机号码/邮箱"));
        } else {
          callback();
        }
      };
      var validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          callback();
        }
      };
      return {
        url: { //登录 Api
          loginApi: this.$Global.url.login
        },
        loginMessage: "", //登录返回信息
        loginType: 'phone',
        /**
         * 表单数据
         */
        loginForm: {
          password: "",
          loginId: ""
        },
        loginRules: {
          password: [{
            validator: validatePass,
            trigger: "blur"
          }],
          loginId: [{
            validator: checkLoginId,
            trigger: "blur"
          }]
        }
      };
    },
    created() {
      // 开发模式
      // if (process.env.NODE_ENV === "development") {
        this.url.loginApi = this.$Global.url.baseUrl + this.$Global.url.login;
      // }
    },
    methods: {
      btnSubmitForm(formName) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.login();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      login() {
        var data = {
          password: this.loginForm.password
        };
        if (this.loginType == "phone") {
          data.phone = this.loginForm.loginId;
        } else if (this.loginType == 'email') {
          data.email = this.loginForm.loginId;
        }
        this.$http
          .post(this.url.loginApi, data)
          .then(response => {
            if (response.status == 200) {
              this.loginMessage = response.data;
              // console.log(this.loginMessage);
              if (this.loginMessage.success) {
                this.$message('登录成功');
                // 将登录信息记录
                this.$store.commit('setLoginInfo', this.loginMessage.account);
                if (this.$store.state.route) {
                  this.$router.push(this.$store.state.route);
                } else {
                  this.$router.push('/');
                }
              } else {
                this.$message(this.loginMessage.message);
              }
            } else {
              // console.log(response);
              this.$message(response.data.message);
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    }
  };
</script>

<style>
  .box-card {
    width: 30%;
    min-width: 400px;
    min-height: 300px;
    margin: 10% auto;
  }
</style>

<style>
  #loginTabs .el-tabs__nav-scroll {
    padding: 0px 81px!important;
  }
</style>